<template>
	<view class="page " v-if="Object.keys(formOptions).length > 0">
		<navHead :datas="headData"></navHead>
		<view class="pd-30">
			<view class="rate_box pd-20 bd-r40">
				<view class="flex">
					<text class="ft-28 fw-800 mr-10">服务评价</text>
					<comRate ref="comRate" :num="star" @change="onChange"></comRate>
				</view>
				<view class="tabs_box">
					<view class="tags ft-24 c-66 bd-r20" v-for="(i, index) of formOptions.info.tag_list" :key="index"
						:class="{ active: tabsArr.includes(i.id) }" @click="selectTabs(i.id)">{{ i.name }}</view>
				</view>
			</view>
			<view class="textarea_box mt-30 bd-r40 pd-20">
				<text class="ft-28 c-33 fw-800">评价内容</text>
				<view class="bg_box bd-r40 pd-20 mt-20">
					<textarea class="textarea" :maxlength="500" v-model="text" placeholder="请输入评价内容"
						placeholder-class="textarea-placeholder" maxlength="500" @input="" />
					<view class="ft-22 c-99 flex-end mt-10">
						{{ text.length }}/{{ 500 }}
					</view>
				</view>

				<view class="img_model bd-r20 mt-20 pd-20">
					<text class="ft-24 c-99">添加图({{ fileList.length || 0 }}/{{ maxLength }})</text>
					<view class="imgBox mt-30">
						<!-- 图片列表 -->
						<view class="img_list">
							<view class="imgItem" v-for="(item, index) in fileList" :key="index">
								<image class="imgs  bd-r20" :src="item.url"
									@click="openImg(index, fileList.map(f => f.url))" mode="aspectFill" />
								<image class="icon_samll icons"
									src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="aspectFit"
									@click="deleteImg(index, item)" />
							</view>
							<u-upload @afterRead="afterRead" name="6" multiple :maxCount="5" v-if="fileList.length < 9">
								<view class="imgUpload flex-center">
									<image class="icon_samll deg-90"
										src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png"
										mode="aspectFit">
									</image>
								</view>
							</u-upload>
						</view>
					</view>

				</view>
			</view>
			<!-- 历程 -->
			<view class="course_box mt-30" v-if="productId">
				<view class="title_box ft-24 fw-800 c-33">您还可以参与写历程与建议赚积分</view>
				<view class="content_box pd-20 bd-r40">
					<view class="top">
						<view class="flex-bwt">
							<view class="ft-28 c-33 fw-900">历程与建议<span class="ft-24 c-66">(非必填)</span> </view>
							<view class="img_box ft-20 fw-800 flex">
								<image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/gold-icon.png"
									mode="aspectFit" @click="deleteImg(index, item)" />
								+ <span class="ft-36 c-33 ft-num3">{{ '100' }}</span>
								<span class="ft-24 c-66 ml-8 fw-400">{{ '积分待领取' }}</span>
							</view>
						</view>
						<view class="tips_box bd-r20 ft-22 c-66 flex-bwt mt-20">
							<view class="flex">
								<image class="icon_samll mr-8"
									src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon.png" mode="aspectFit">
								</image>
								<view>购买过的项目写历程评价，赚取积分</view>
							</view>
							<view class="btn bd-r20 ft-22 c-33">查看规则</view>
						</view>
					</view>
					<!-- 伸缩区域 -->
					<view class="content_flex_box" v-if="!unfoldVal">
						<view class="title_box2 pd-20 mt-30 bd-r20">
							<view class="title flex-bwt ft-22 c-99">
								<view class="ft-24 c-66">写购买历程感受</view>
								<view class="flex">查看示例 <image class="icon_samll ml-4 mr-8 mt-4"
										src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon.png"
										mode="aspectFit">
									</image>
								</view>
							</view>
							<view class="integral_box flex-bwt mt-20">
								<view class="ft-28 c-33">+<span class="ft-48 fw-900 ft-num3 mr-4">50</span>积分</view>
								<view class="add_btn bd-r20 flex-center ft-24" @click="addList()">
									<image class="icon_samll mr-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon.png" mode="aspectFit">
									</image>
									增加历程
								</view>
							</view>
						</view>
						<view class="edit_box">
							<view class="edit_Box_item bd-r20 pd-20" v-for="item in courseList" :key="item.id">
								<view class="title ft-24 c-33 fw-800 flex-bwt">{{ `第${item.str}阶段` }}
									<view class="c-99 flex-center" @click="deleteList(item)">删除
										<image class="icon_samll ml-4"
											src="https://cdn.oss.bon-top.cn/static_bc/images/clear_no.png"
											mode="aspectFit">
										</image>
									</view>
								</view>
								<view class="time_box flex-bwt ft-24 fw-800 c-33 pd-20 bd-r20 mt-20">
									时间段
									<view class="time_text c-66 fw-400 flex-center" @click="selectTimes(item)">
										{{ item.time || '请选择' }}
										<image class="icon_samll deg-90 ml-8"
											src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png"
											mode="aspectFit">
										</image>
									</view>

								</view>
								<!-- 日历组件 -->
								<!-- <u-calendar :show="show" mode="single" :minDate="minDate" :maxDate="maxDate"
									@confirm="confirm" v-if="show" @close="close"
									:defaultDate="item.defaultDateMultiple"></u-calendar> -->
								<!-- <Calendar v-model:start-date="startDate" :show="show" v-model:end-date="endDate" /> -->

								<wu-calendar ref="calendar" mode="range" color="#DBF046" :insert="false" :lunar="true"
									:endDate="endDate" @confirm="calendarConfirm"></wu-calendar>
								<view>
									<textarea class="textarea bd-r20 mt-20 pd-10" v-model="item.textarea"
										placeholder="请输入您想描述的简介" maxlength="-1" placeholder-class="textarea-placeholder" />
								</view>
							</view>
						</view>


						<view class="title_box2 pd-20 mt-30 bd-r20">
							<view class="title flex-bwt ft-22 c-99">
								<view class="ft-24 c-66">写建议反馈</view>
								<view class="flex">查看示例 <image class="icon_samll ml-4 mr-8 mt-4"
										src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon.png"
										mode="aspectFit">
									</image>
								</view>
							</view>
							<view class="integral_box flex-bwt mt-20">
								<view class="ft-28 c-33">+<span class="ft-48 fw-900 ft-num3 mr-4">50</span>积分</view>
							</view>
						</view>
						<view class="describe_box">
							<textarea class="textarea bd-r20 mt-20" maxlength="-1" v-model="advise" placeholder="请输入建议与反馈"
								placeholder-class="textarea-placeholder" @input="" />
						</view>
					</view>

					<view class="bottom_btn ft-24 c-33 flex-center pd-30" @click="unfoldVal = !unfoldVal">
						{{ unfoldVal ? '展开更多' : '收起更多' }}
						<image class="icon_samll ml-4" :class="{ 'deg-180': !unfoldVal }"
							src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 240rpx;"></view>
	</view>
	<view class="btn_box pd-30">
		<view class="btn submit" @click="submit">提交评价</view>
	</view>
</template>
<script setup lang="js">
import {
	ref,
	reactive
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad
} from '@dcloudio/uni-app';
import comRate from '@/components/comRate.vue'
import {
	DataUtils
} from '@/utils/Data.js'

import navHead from '@/components/navHead.vue';

const headData = reactive({
	color: '#fff',
	title: '评价服务'
})
const minDate = ref(new Date(1970, 0, 1).getTime())
const endDate = ref(DataUtils.nowDateFun('yy-mm-dd'))
// const defDate =ref(['2025-5-12','2025-5-2'])
const unfoldVal = ref(true)
const show = ref(false)
const text = ref('')
const advise = ref('')
const fileList = ref([])
let numArr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
// const courseList = ref([{
// 	id: 1,
// 	str: '一',
// 	time: '',
// 	timeArr: [],
// 	textarea: '',
// 	defaultDateMultiple: [DataUtils.nowDateFun('yy-mm-dd')]
// }])
const calendarConfirm = (e) => {

	console.log('e==>', e)
	let dataTime = e.range
	if (!dataTime.after) return uni.showToast({
		title: '请选择结束时间',
		icon: 'none'
	})

	courseList.value.forEach(f => {
		if (f.id == selectItem.value.id) {
			f.timeArr = [dataTime.before, dataTime.after]
			f.time = `${dataTime.before},${dataTime.after}`
		}
	})
	console.log('数据=>', selectItem.value)
	console.log('数据=>', courseList.value)
}
const courseList = ref([])

const back = () => {
	uni.navigateBack()
}
const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}
// 提交
const submit = () => {
	const formData = {
		evaluate_id: id.value,
		star: starVal.value,
		name: text.value,
		advise: advise.value,
		tag_ids: tabsArr.value,
	}
	if (!id.value) {
		formData.order_id = orderId.value
		formData.product_id = productId.value
		formData.additional_id = additionalId.value
		formData.sale_id = saleId.value
	}
	formData.images = fileList.value.map(item => {
		return item.url
	})

	if (productId.value) {
		formData.process = JSON.stringify(courseList.value.map(item => {
			return {
				id: id.value ? item.id : '',
				content: item.textarea,
				time: item.timeArr
			}
		}))
	}
	console.log('formData', formData)
	utils
		.request(
			api.evaluate, formData,
			"post"
		)
		.then((res) => {
			uni.showToast({
				title: '提交成功',
				icon: 'none',
				duration: 2000
			})
			setTimeout(() => {
				getApp().globalData.shouldRefresh = true;
				uni.navigateBack()
			}, 2000)
		});
}
const confirm = (arr) => {
	console.log('time', arr)
	show.value = false
	courseList.value.forEach(f => {
		if (f.id == selectItem.value.id) {
			f.timeArr = [arr[0], arr[arr.length - 1]]
			f.time = `${arr[0]}- ${arr[arr.length - 1]}`
		}
	})
	console.log('courseList', courseList.value)

}
const close = () => {
	show.value = false
}
const selectItem = ref({})
const calendar = ref(null)
const selectTimes = (item) => {
	show.value = true
	selectItem.value = item
	console.log('calendar', calendar.value)
	calendar.value[0].open()
}
// 添加历程
const addList = () => {
	if (courseList.value.length < 11)
		courseList.value.push({
			id: courseList.value.length > 1 ? courseList.value[courseList.value.length - 1].id + 1 : courseList.value.length,
			str: numArr[courseList.value.length],
			time: '',
			timeArr: [],
			textarea: '',
			defaultDateMultiple: [DataUtils.nowDateFun('yy-mm-dd')]
		})
}

// 删除历程
const deleteList = (item) => {
	console.log(item)
	courseList.value = courseList.value.filter(f => f.id !== item.id)
	console.log('courseList', courseList.value)
}
// 删除图片
const deleteImg = (index, item) => {
	fileList.value = fileList.value.filter((f, i) => i !== index)
}
const maxLength = ref(9)
// 新增图片
const afterRead = async (event) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	lists = lists.slice(0, maxLength.value - fileList.value.length)

	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = lists[i];
		fileList.value.push({
			...item,
			status: 'success',
			message: '',
			url: result,
		});
	}
};

const uploadFilePromise = (url) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: utils.domain + '/api/v1/button.uploadImage',
			filePath: url,
			name: 'image',
			fileType: 'image',

			formData: {
				app_id: utils.app_id,
				identity: utils.identity,
			},
			header: {
				// 'content-type': 'multipart/form-data',
				'Authorization': utils.getToken()
			},
			success: (res) => {
				const resData = JSON.parse(res.data)
				resolve(resData.data.info.url);
			},
		});
	});
};

const tabsArr = ref([])
const selectTabs = (item) => {
	if (!tabsArr.value.includes(item)) {
		tabsArr.value.push(item)
	} else {
		tabsArr.value = tabsArr.value.filter(f => f != item)
	}
}
// 评分
const onChange = (data) => {
	starVal.value = data.activeCount
	tabsArr.value = []
	getOptions()
}

const formOptions = ref({})
const getOptions = () => {
	utils
		.request(
			api.getEvaluateOptions, {
			type: saleId.value > 0 ? 2 : 1,
			star: starVal.value
		},
			"get"
		)
		.then((res) => {
			formOptions.value = res.data
		});
}

const id = ref('')
const orderId = ref('')
const productId = ref('')
const additionalId = ref('')
const saleId = ref('')
const star = ref(0)
const starVal = ref(0)
onLoad(option => {
	id.value = option?.id || ''
	orderId.value = option?.order_id || ''
	productId.value = option?.product_id || ''
	additionalId.value = option?.additional_id || ''
	saleId.value = option?.sale_id || ''
	if (id.value) {
		utils
			.request(
				api.getEvaluateDetail, {
				id: id.value
			},
				"get"
			)
			.then((res) => {
				const resData = res.data.info
				productId.value = resData?.product_id || ''
				additionalId.value = resData?.additional_id || ''
				saleId.value = resData?.sale_id || ''

				star.value = resData.star
				starVal.value = resData.star
				tabsArr.value = resData.tags.map(item => {
					return item.id
				})
				advise.value = resData.advise
				text.value = resData.name
				fileList.value = resData.images.map(item => {
					return {
						url: item
					}
				})
				courseList.value = resData.process.map((item, index) => {
					return {
						id: item.id,
						str: numArr[index] ? numArr[index] : (index + 1),
						time: item.time[0] + '-' + item.time[1],
						timeArr: item.time,
						textarea: item.content,
						defaultDateMultiple: [DataUtils.nowDateFun('yy-mm-dd')]
					}
				})
				getOptions()
			});
	} else {
		getOptions()
	}
})
</script>

<style lang="scss" scoped>
.rate_box {
	background: linear-gradient(to bottom, #FBFFDF, #F8F8F8);

	.tabs_box {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-evenly;
		flex-grow: 4;

		.tags {
			padding: 10rpx 20rpx;
			background-color: #fff;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}

		.active {
			background-color: #333;
			color: #DBF046;
		}
	}

}

.textarea_box {
	background-color: #F8F8F8;

	.bg_box {
		background-color: #fff;
	}

	.textarea {
		width: 100%;
		height: 500rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #666;
		border-bottom: 2rpx solid #F1F1F1;

		.textarea-placeholder {
			font-size: 24rpx;
			color: #999;
			// padding: 20rpx;
		}
	}
}

.img_model {
	background-color: #fff;

	.imgBox {
		display: flex;
		align-items: flex-end;

		.img_list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.imgItem {
				// margin-right: auto;

				.imgs {
					width: 106rpx;
					height: 136rpx;
				}

				width: 106rpx;
				height: 136rpx;
				position: relative;

				.icons {
					position: absolute;
					right: 5rpx;
					top: 5rpx;
				}
			}

			:deep(.u-upload) {
				flex: 0 !important;
				margin-left: auto;
			}
		}

		.imgUpload {
			width: 106rpx;
			height: 136rpx;
			border-radius: 20rpx;
			border: 2rpx dashed #333;

		}


	}


}

.btn_box {
	background-color: #F8F8F8;
	// background-color: red;
	position: fixed;
	width: 100%;
	height: 180rpx;
	bottom: 0;
	display: flex;

	.btn {
		text-align: center;
		line-height: 78rpx;
		height: 78rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		width: 196rpx;
		background-color: #fff;
	}

	.submit {
		flex: 1;
		background-color: #333;
		color: #DBF046;
		margin-left: 20rpx;
	}
}

// 历程
.course_box {
	.title_box {
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		background: linear-gradient(to bottom, #FBFFDF, #FFFFFF);
	}

	.tips_box {
		height: 72rpx;
		background-color: #fff;
		padding: 0 20rpx;

		.btn {
			background-color: #F8F8F8;
			padding: 10rpx 20rpx;
		}
	}

	.content_box {
		background-color: #F8F8F8;

		.top {
			.icons {
				width: 36rpx;
				height: 36rpx;
			}
		}

	}

	.bottom_btn {
		text-align: center;
		background: linear-gradient(to top, #FFFFFF, #ffffff00);
		border-radius: 40rpx;
	}

	.content_flex_box {
		.title_box2 {
			background: linear-gradient(to top, #F8F8F8, #FBFFDF);

			.integral_box {
				.add_btn {
					background-color: #333;
					color: #fff;
					height: 58rpx;
					width: 178rpx;
				}
			}
		}

		.edit_box {
			.edit_Box_item {
				background-color: #fff;
				margin-bottom: 20rpx;

				.time_box {
					border: 2rpx solid #F1F1F1;
				}

				.textarea {
					width: 100%;
					// background-color: red;
					height: 200rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #666;

					.textarea-placeholder {
						font-size: 24rpx;
						color: #999;
						// padding: 20rpx;
					}
				}
			}
		}

		.describe_box {
			background-color: #F8F8F8;

			.textarea {
				width: 100%;
				height: 500rpx;
				background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				color: #666;

				.textarea-placeholder {
					font-size: 24rpx;
					color: #999;
					// padding: 20rpx;
				}
			}
		}
	}
}
</style>